<template>
	<div class="basic-config">
		<lang></lang>
		<curr-app></curr-app>
		<list-title :data="header"></list-title>
		<el-tabs tab-position="left" style="margin-top: 10px;" @tab-click="handleClick">
			<el-tab-pane label="核心设置">
				<el-form :model="coreConfigForm" :rules="rules" ref="coreConfigForm" label-width="200px">
					<!-- <el-form-item label="LOGO" prop="data.logo" style="width: 273px;"> -->
					<el-form-item label="LOGO" prop="data.logo" style="width: 715px;">
						<!-- <upload :domain="this.$domain.cms" :limit="1" :fileList="coreConfigForm.data.logo" :maxSize="20" :appid="$route.query.appid" @insertPic="insertPic" @delPic="delPic"></upload> -->
						<!-- OSS图片上传 -->
						<!-- <upload-oss :domain="this.$domain.ac" :ossdomain="this.$ossdomain" :limit="1" :fileList="coreConfigForm.data.logo" :maxSize="20" :appid="$route.query.appid" @insertPic="insertPic" @delPic="delPic"></upload-oss> -->
						<!-- OSS文件上传 -->
						<!-- <upload-oss :stsdomain="this.$domain.ac" :ossdomain="this.$ossdomain" :limit="1" :fileSrc="'aabbcc'" :fileList="[]" :maxSize="20" :appid="$route.query.appid" :type="'file'" @insertFile="insertFile" @delFile="delFile"></upload-oss> -->
						<div>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("logo")'>标签调用</el-button>
							<div style="width: 415px;">
								<div style="width: 220px;">
									<upload-oss 
									:stsdomain="this.$domain.ac" 
									:ossdomain="this.$ossdomain" 
									:appid="$route.query.appid" 
									:limit="3" 
									:fileList="coreConfigForm.data.logo" 
									:maxSize="20" 
									@insertFile="insertFile"
									@delFile="delFile">
									</upload-oss>
								</div>
							</div>
						</div>
						<!-- :type="'file'"
						:fileSrc="coreConfigForm.data.name"  -->
					</el-form-item>
					<el-form-item label="客服热线" prop="data.hotline" style="width: 715px;">
						<div>
							<el-input v-model="coreConfigForm.data.hotline" placeholder="客服热线" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("hotline")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="备案号" prop="data.icp" style="width: 715px;">
						<div>
							<el-input v-model="coreConfigForm.data.icp" placeholder="备案号" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("icp")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="流量统计" prop="data.traffic_statistics" style="width: 715px;">
						<div>
							<el-input type="textarea" :rows="5" placeholder="请输入代码" v-model="coreConfigForm.data.traffic_statistics" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("trafficStatistics")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="启动应用" prop="data.state">
						<el-switch v-model="coreConfigForm.data.state"></el-switch>
					</el-form-item>
					<el-form-item label="关闭原因" prop="data.close_reason" style="width: 715px;" v-if="!coreConfigForm.data.state">
						<div>
							<el-input type="textarea" :rows="2" maxlength="50" show-word-limit placeholder="请输入内容" v-model="coreConfigForm.data.close_reason" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("closeReason")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitCoreForm('coreConfigForm')" :disabled='coreConfigForm.submitLock'>
							确 定 <span class="el-icon-loading" v-if='coreConfigForm.submitLock'></span>
						</el-button>
						<el-button @click="resetForm('coreConfigForm')" v-if='coreConfigForm.data.id==0'>重 置</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="基本信息">
				<el-form :model="basicConfigForm" :rules="rules" ref="basicConfigForm" label-width="200px">
					<el-form-item label="应用名称" prop="data.website_name" style="width: 715px;">
						<div>
							<el-input v-model="basicConfigForm.data.website_name" placeholder="应用名称" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("website_name")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="SEO标题" prop="data.seo_title" style="width: 715px;">
						<div>
							<el-input v-model="basicConfigForm.data.seo_title" placeholder="SEO标题" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("seo_title")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="关键词" prop="data.seo_keyword" style="width: 715px;">
						<div>
							<el-input v-model="basicConfigForm.data.seo_keyword" placeholder="关键词" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("seo_keyword")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="描述" prop="data.seo_describe" style="width: 715px;">
						<div>
							<el-input type="textarea" :rows="2" maxlength="50" show-word-limit placeholder="请输入内容" v-model="basicConfigForm.data.seo_describe" style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("seo_describe")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="版权信息" prop="data.copyright" style="width: 715px;">
						<div>
							<el-input type="textarea" :rows="2" maxlength="50" show-word-limit placeholder="请输入内容" v-model="basicConfigForm.data.copyright"  style="width: 415px;"></el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("copyright")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitBasicForm('basicConfigForm')" :disabled='basicConfigForm.submitLock'>
							确 定 <span class="el-icon-loading" v-if='basicConfigForm.submitLock'></span>
						</el-button>
						<el-button @click="resetForm('basicConfigForm')" v-if='basicConfigForm.data.id==0'>重 置</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="域名绑定">
				<div class="warning">
					注意：提交域名后，24小时内生效！
				</div>
				<el-form :model="coreConfigForm" :rules="rules" ref="coreConfigForm" label-width="200px">
					<el-form-item label="PC网址" prop="data.pc_url" style="width: 715px;">
						<div>
							<el-input v-model="coreConfigForm.data.pc_url" placeholder="请输入PC网址" class="input-with-select" style="width: 415px;">
								<el-select v-model="coreConfigForm.data.pc_url_agreement" slot="prepend" style="width: 90px">
									<el-option label="http://" value="http://"></el-option>
									<el-option label="https://" value="https://"></el-option>
								</el-select>
							</el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("pcUrl")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="移动网址" prop="data.mobile_url" style="width: 715px;">
						<div>
							<el-input v-model="coreConfigForm.data.mobile_url" placeholder="请输入移动网址" class="input-with-select" style="width: 415px;">
								<el-select v-model="coreConfigForm.data.mobile_url_agreement" slot="prepend" style="width: 90px">
									<el-option label="http://" value="http://"></el-option>
									<el-option label="https://" value="https://"></el-option>
								</el-select>
							</el-input>
							<el-button size="mini" type='text' class="r tag-read" @click='getTag("mobileUrl")'>标签调用</el-button>
						</div>
					</el-form-item>
					<el-form-item label="服务器节点" prop="data.server">
						<template>
							<el-radio v-model="coreConfigForm.data.server" label="1">上海（需备案）</el-radio>
							<el-radio v-model="coreConfigForm.data.server" label="10">香港（无需备案）</el-radio>
						</template>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitCoreForm('coreConfigForm')" :disabled='coreConfigForm.submitLock'>
							确 定 <span class="el-icon-loading" v-if='coreConfigForm.submitLock'></span>
						</el-button>
						<el-button @click="resetForm('coreConfigForm')" v-if='coreConfigForm.data.id==0'>重 置</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<!-- <el-tab-pane label="水印设置">水印设置</el-tab-pane> -->
			<el-tab-pane label="备案资料">备案资料</el-tab-pane>
		</el-tabs>
		
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
// import Upload from "pc/common/Upload"
import UploadOss from "pc/common/UploadOss"
import {changeToBool, changeUploadFormatBack, judgeAuth} from "static/js/common.js"
import {ERROR} from "static/js/constant.js"
import {mapGetters} from 'vuex'
import Clipboard from 'clipboard'
import Lang from "pc/common/Lang"
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*当前语言*/
			currlang: '',
			/*头部数据*/
			header: {
				title: '基本信息配置',
				reload: false,
			},
			/*核心设置数据*/
			coreConfigForm: {
				submitLock: false,
				data: {
					pc_url_agreement: 'http://',
					mobile_url_agreement: 'http://',
					pc_url: '',
					mobile_url: '',
					server: '1',
					logo: [],
					hotline: '',
					icp: '',
					traffic_statistics: '',
					state: true,
					close_reason: '',
				}
			},
			/*基本设置数据*/
			basicConfigForm: {
				submitLock: false,
				data: {
					website_name: '',
					seo_title: '',
					seo_keyword: '',
					seo_describe: '',
					copyright: '',
				}
			},
			rules: {
				data: {
					website_name: [
						{ required: true, message: '请输入应用名称', trigger: 'blur' },
						{ min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
					],
				}
			}
		};
	},
	components: {
		ListTitle,
		// Upload,
		UploadOss,
		Lang,
		CurrApp
	},
	created: function() {
		/*获取当前语言*/
		let lang = this.$localstorage.get('lang');
		this.currlang = lang?lang:'zh'
		/*取出参数*/
		this.getCoreConfig()
	},
	methods: {
		handleClick(tab, event) {
			if(tab.index == 1){
				/*取出参数*/
				this.getBasicConfig()
			}
		},
		/*取出核心参数*/
		getCoreConfig() {
			if(this.$api.cmsCoreConfigBasic != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.cmsCoreConfigBasic, {
					appid: this.appid
				}).then(res => {
					if(res.data.code === 0){
						if(res.data.data != undefined){
							if(res.data.data.pc_url.indexOf("http://") != -1){
								this.coreConfigForm.data.pc_url_agreement = "http://"
								this.coreConfigForm.data.pc_url = res.data.data.pc_url.substring(7)
							}else if(res.data.data.pc_url.indexOf("https://") != -1){
								this.coreConfigForm.data.pc_url_agreement = "https://"
								this.coreConfigForm.data.pc_url = res.data.data.pc_url.substring(8)
							}else{
								this.coreConfigForm.data.pc_url_agreement = "http://"
								this.coreConfigForm.data.pc_url = res.data.data.pc_url
							}
							if(res.data.data.mobile_url.indexOf("http://") != -1){
								this.coreConfigForm.data.mobile_url_agreement = "http://"
								this.coreConfigForm.data.mobile_url = res.data.data.mobile_url.substring(7)
							}else if(res.data.data.mobile_url.indexOf("https://") != -1){
								this.coreConfigForm.data.mobile_url_agreement = "https://"
								this.coreConfigForm.data.mobile_url = res.data.data.mobile_url.substring(8)
							}else{
								this.coreConfigForm.data.mobile_url_agreement = "http://"
								this.coreConfigForm.data.mobile_url = res.data.data.mobile_url
							}
							this.coreConfigForm.data.logo = changeUploadFormatBack(res.data.data.logo)
							this.coreConfigForm.data.hotline = res.data.data.hotline
							this.coreConfigForm.data.icp = res.data.data.icp
							this.coreConfigForm.data.traffic_statistics = res.data.data.traffic_statistics
							this.coreConfigForm.data.state = changeToBool(res.data.data.state)
							this.coreConfigForm.data.close_reason = res.data.data.close_reason
								
						}
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*核心设置参数*/
		submitCoreForm(formName) {
			if(this.appid == 'undefined' || this.appid == ''){
				this.$message({
					showClose: true,
					message: '参数有问题，请勿随意更改！',
					type: 'error'
				});
				return
			}
			if(this.$api.cmsCoreConfigBasic != undefined){
				if(!this.coreConfigForm.submitLock){
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.coreConfigForm.submitLock = true;
							// console.log(domain.cms)
							this.$baseURL(this.$domain.cms)
							let data = JSON.parse(JSON.stringify(this.coreConfigForm.data))
							this.$post(this.$api.cmsCoreConfigBasic, {
								CoreConfig: data,
								appid: this.appid
							}).then(res => {
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
							})
							.catch(err => {
								let error = ERROR.SER404
								if(err.response != undefined  && err.response.status == 500){
									error = ERROR.SER500
								}
								this.$message({
									showClose: true,
									message: error,
									type: 'error'
								});
							})
							.finally(() => {
								this.coreConfigForm.submitLock = false;
							});
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				}
			}
		},
		/*===============================================*/
		/*取出基本参数*/
		getBasicConfig() {
			if(this.$api.cmsBasicConfigBasic != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.cmsBasicConfigBasic, {
					appid: this.appid,
					lang: this.currlang
				}).then(res => {
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.basicConfigForm.data.website_name = res.data.data.website_name
							this.basicConfigForm.data.seo_title = res.data.data.seo_title
							this.basicConfigForm.data.seo_keyword = res.data.data.seo_keyword
							this.basicConfigForm.data.seo_describe = res.data.data.seo_describe
							this.basicConfigForm.data.copyright = res.data.data.copyright
						}
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*核心设置参数*/
		submitBasicForm(formName) {
			if(this.appid == 'undefined' || this.appid == ''){
				this.$message({
					showClose: true,
					message: '参数有问题，请勿随意更改！',
					type: 'error'
				});
				return
			}
			if(this.$api.cmsBasicConfigBasic != undefined){
				if(!this.basicConfigForm.submitLock){
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.basicConfigForm.submitLock = true;
							// console.log(domain.cms)
							this.$baseURL(this.$domain.cms)
							this.basicConfigForm.data.lang = this.currlang
							let data = JSON.parse(JSON.stringify(this.basicConfigForm.data))
							this.$post(this.$api.cmsBasicConfigBasic, {
								BasicConfig: data,
								appid: this.appid
							}).then(res => {
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
							})
							.catch(err => {
								let error = ERROR.SER404
								if(err.response != undefined  && err.response.status == 500){
									error = ERROR.SER500
								}
								this.$message({
									showClose: true,
									message: error,
									type: 'error'
								});
							})
							.finally(() => {
								this.basicConfigForm.submitLock = false;
							});
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				}
			}
		},
		/*插入上传的图片*/
		insertPic(list){
			for(let i=0; i<list.length; i++){
				this.coreConfigForm.data.logo.push(
					{
						name: '',
						url:  list[i].url
					}
				)
			}
		},
		/*删除上传的图片*/
		delPic(index){
			this.coreConfigForm.data.logo.splice(index, 1)
		},
		/*插入上传的文件*/
		insertFile(file){
			// console.log(file instanceof Array)
			if(file instanceof Array){//如果是数组的话，说明是图片
				for(let i=0; i<file.length; i++){
					this.coreConfigForm.data.logo.push(
						{
							name: '',
							url:  file[i].url
						}
					)
				}
			}else{//单个文件路径

			}
		},
		/*删除上传的文件*/
		delFile(index){
			if(index >= 0){//图片
				this.coreConfigForm.data.logo.splice(index, 1)
			}else{//文件路径

			}
		},
		/*调用标签*/
		getTag(content){
			// console.log(content, 1111)
			let self = this;
			var clipboard = new Clipboard('.tag-read', {
				text: function() {
					return "{us:webinfo name='" + content + "'}";
				}
			});

			clipboard.on('success', e => {
				self.$message({
					message: '复制标签成功!',
					type: 'success'
				});
				//tips(this, '复制链接成功!', 'success');
				clipboard.destroy()   // 释放内存
			})
			clipboard.on('error', e => {
				// 不支持复制
				self.$message({
					message: '该浏览器不支持链接复制!',
					type: 'warning'
				});
				//tips(this, '该浏览器不支持链接复制!', 'warning');
				clipboard.destroy()    // 释放内存
			})
		}
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
.warning
	color: #8a6d3b
	background-color: #fcf8e3
	border: 1px solid #faebcc
	margin-top: 10px
	padding: 10px
	font-size: 12px
	line-height: 20px
.basic-config
	form
		margin-top: 10px
.r
	float: right
</style>